<script setup lang="ts">
import {
  ElRow,
  ElCol,
  ElAlert,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElMessage,
} from 'element-plus';
import { ElRadioGroup, ElRadio, ElRadioButton, ElTooltip } from 'element-plus';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import 'codemirror/mode/javascript/javascript.js';
import type { CmComponentRef } from 'codemirror-editor-vue3';
import { DocumentEditor } from '@onlyoffice/document-editor-vue';
const demoFileUrl = defineModel('demoFileUrl');
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: 'ScrollRelation',
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return 'xxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const code = ref(``);
const containerRef = ref();
const cmRef = ref<CmComponentRef>();

let documentEditorKey = ref('');
let containerHeight = 0;
let officeHeight = ref('100%');
let doHeight = ref(false);
onMounted(() => {
  containerHeight = containerRef.value.parentNode.offsetHeight;
  console.log(11, containerHeight);
  containerRef.value.style.height = containerHeight + 'px';
  if (containerHeight > 800) {
    containerHeight = 800;
  }
  officeHeight.value = containerHeight + 'px';
  doHeight.value = true;
  documentEditorKey.value = getUuid();
});

onUnmounted(() => {
  cmRef.value?.destroy();
});

let scrollType = ref('toPos');
let sourceConnector = null;
let targetConnector = null;
const onDocumentReadySource = () => {
  window.sourceConnector = sourceConnector = DocEditor.instances.source.createConnector();
  console.log('onDocumentReadySource', sourceConnector);
  sourceConnector.attachEvent('onScrollAction', function (data) {
    // console.log(data.type, data.currentPos, data.limit);
    console.log('source');
    Asc.scope = {
      scrollType: scrollType.value,
      dirction: data.type,
      pos: data.currentPos,
      limit: data.limit,
    };
    targetConnector.callCommand(
      function () {
        let pos = Asc.scope.pos;
        if (Asc.scope.scrollType == 'limit') {
          pos = Asc.scope.limit;
        }
        Api.ScrollAction(Asc.scope.scrollType, Asc.scope.dirction, pos);
      },
      function () {},
    );
  });
};
const onDocumentReadyTarget = () => {
  window.targetConnector = targetConnector = DocEditor.instances.target.createConnector();
  console.log('onDocumentReadyTarget', targetConnector);
  targetConnector.attachEvent('onScrollAction', function (data) {
    console.log('target');
    Asc.scope = {
      scrollType: scrollType.value,
      dirction: data.type,
      pos: data.currentPos,
      limit: data.limit,
    };
    sourceConnector.callCommand(
      function () {
        let pos = Asc.scope.pos;
        if (Asc.scope.scrollType == 'limit') {
          pos = Asc.scope.limit;
        }
        Api.ScrollAction(Asc.scope.scrollType, Asc.scope.dirction, pos);
      },
      function () {},
    );
  });
};

var sourceConfig = ref({
  height: officeHeight.value,
  type: 'desktop',
  // "type": "mobile",
  documentType: 'word',
  historyList: {
    history: [],
    currentVersion: '1',
  },
  document: {
    title: '原文.docx',
    url: 'http://47.94.91.67/demo_file/paragraphMarkSource.docx',
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: 'docx',
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: false,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: 'theme-light',
      zoom: 70,
    },
    mode: 'edit',
    callbackUrl:
      'https://api.docs.onlyoffice.com/dummyCallback',
    lang: 'zh-CN',
    user: {
      name: '曹瑞剑雄',
      id: '104',
    },
  },
});

var targetConfig = ref({
  height: officeHeight.value,
  type: 'desktop',
  // "type": "mobile",
  documentType: 'word',
  historyList: {
    history: [],
    currentVersion: '1',
  },
  document: {
    title: '译文.docx',
    url: 'http://47.94.91.67/demo_file/paragraphMarkTarget.docx',
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: 'docx',
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: false,
      forcesave: true,
      toolbarNoTabs: false,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: 'theme-light',
      zoom: 70,
    },
    mode: 'edit',
    callbackUrl:
      'https://api.docs.onlyoffice.com/dummyCallback',
    lang: 'zh-CN',
    user: {
      name: '曹瑞剑雄',
      id: '104',
    },
  },
});

const init = function () {
  sourceConfig.value.document.key = getUuid();
};
init();
</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row style="height: 5%">
      <el-radio-group v-model="scrollType" size="small">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="滚动到相同pos"
          placement="top"
        >
          <el-radio-button value="toPos" label="同步模式"></el-radio-button>
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="从当前位置滚动相同步长"
          placement="top"
        >
          <el-radio-button value="limit" label="步进模式"></el-radio-button>
        </el-tooltip>
      </el-radio-group>
    </el-row>
    <el-row style="height: 95%">
      <!-- <el-col :span="2"> </el-col> -->
      <el-col :span="12">
        <DocumentEditor
          v-if="doHeight"
          id="source"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="sourceConfig"
          :events_onDocumentReady="onDocumentReadySource"
        />
      </el-col>
      <el-col :span="12" style="height: 100%">
        <DocumentEditor
          v-if="doHeight"
          id="target"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="targetConfig"
          :events_onDocumentReady="onDocumentReadyTarget"
        />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
.panel-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 6px;
  padding: 0 24px;
}
.cross-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.diff-panel-list .title {
  font-size: 16px;
}
.panel-body {
  padding: 0 24px;
  overflow: auto;
}
.diff-item {
  border: 1px solid rgba(81, 141, 150, 0.2);
  border-radius: 4px;
  margin-top: 12px;
  cursor: pointer;
  padding: 6px 10px 15px;
  background: rgba(232, 234, 239, 0.21);
  border: 1px solid rgba(185, 192, 206, 0.3);
  border-radius: 8px;
}
.diff-item-active {
  border: 1px solid #1c6dff;
  -webkit-box-shadow: 0 0 16px 6px rgba(57, 127, 138, 0.1215686275);
  box-shadow: 0 0 16px 6px rgba(57, 127, 138, 0.1215686275);
}
.cross-align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.bold {
  font-weight: 500;
}
.diff-dot {
  width: 2px;
  height: 14px;
  background: #00bfaf;
  margin-right: 8px;
}
.diff-item-addition .diff-dot {
  background: #1c6dff;
}
.diff-type {
  color: #2f3d59;
}
.diff-content {
  word-break: break-all;
  white-space: break-spaces;
}
.diff-content {
  padding-left: 10px;
  margin-top: 10px;
  line-height: 22px;
  max-height: 154px;
  overflow-y: hidden;
}
.diff-item-deletion .diff-dot,
.diff-item-unfill .diff-dot {
  background: #ec4949;
}
.flex-row {
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-col {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-col,
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
}
.diff-content .addition {
  color: #1c6dff;
}
.diff-content .deletion {
  color: #ec4949;
  text-decoration: line-through;
}
</style>
